//表单验证配置文件
let validateFormOpt = {
    formSelector: '#register',
    // submitSelector: '#submit',
    fieldsOpt: {
        email: {
            rules: { reg: /^\w{2,}@\w{2,}\.[A-Za-z0-9]{2,}$/ },
            successMsg: "终于填对了",
            errorMsg: "没有邮箱吗",
            selector: '#email'//如果没有传入selector默认使用[name=字段作为选择器]
        },
        tel: {
            rules: { reg: /^1[2-9]\d{9}$/ },
            errorMsg: "电话号码格式不正确",
            selector: '#tel'
        },
        username: {
            rules: { reg: /^[a-zA-Z]\w{5}/ },
            successMsg: "",
            errorMsg: "用户名格式不正确",
            selector: '#username'
        },
        password1: {
            rules: { reg: /^.{6,20}$/ },
            successMsg: " ",
            errorMsg: "密码长度为6-20位",
            selector: '#password1'
        },
        password2: {
            rules: { reg: /^.{6,20}$/, equal: 'password1' },
            successMsg: "",
            errorMsg: {
                reg: '密码格式错误',
                equal: "两次密码不相等"
            },
            selector: '#password2',
            //字段验证成功回调函数
            // fieldSuccess
            // fieldError
        },  
        city:{
            rules:{
                require:true
            },
            errorMsg:'必须选择城市',
            successMsg:'城市选择正确'
        },
        secret:{
            rules:{
                require:true,
                value:['a']
            }
        },
        agree:{
            rules:{
                checked:true
            },
            selector: '#agree',
            errorMsg:'必须同意才能注册',
            successMsg:'可以了'
        },
    },
    
    //字段验证成功回调函数
    fieldSuccess: fieldSuccess,
    //字段验证失败回调函数
    fieldError: fieldError,

    //自定义表单验证成功回掉函数
    formSuccess: function (valiRes) {
        console.log('验证成功')
    },
    //自定义表单验证成功失败回掉函数
    formError: function (valiRes) {
        console.log(valiRes)
        console.log('验证失败')
    }

}

//向上找到对应的元素
function findParent(element,className){
    while(!element.parentElement.classList.contains(className)){
        element = element.parentElement
        if(element.tagName == 'HTML'){
            return 
        }
    }
    return element.parentElement
}

function fieldSuccess(field, msg, element) {
    console.log('验证成功')
    element.parentElement.classList.add('has-success')
    element.parentElement.classList.remove('has-error')
    const helpBlockEle = findParent(element,'form-group').querySelector('.help-block')
    helpBlockEle.classList.add('success')
    helpBlockEle.classList.remove('error')
    helpBlockEle.innerText = msg
    console.log(`${field}验证成功 ：${msg}`)
}

function fieldError(field, msg, element) {
    element.parentElement.classList.remove('has-success')
    element.parentElement.classList.add('has-error')
    const helpBlockEle = findParent(element,'form-group').querySelector('.help-block')
    helpBlockEle.classList.remove('success')
    helpBlockEle.classList.add('error')
    helpBlockEle.innerText = msg
    console.log(`${field}验证失败 ：${msg}`)
}

let vf = new ValidateForm(validateFormOpt)
